<!DOCTYPE html>
<html>

<head>
  <script src="./konva.min.js"></script>
  <meta charset="utf-8" />
  <title>Konva Shape zIndex</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #f0f0f0;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script>
    var width = window.innerWidth
    var height = window.innerHeight

    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    })

    var layer = new Konva.Layer()
    stage.add(layer)

    // create first group with two shapes
    var group1 = new Konva.Group()
    layer.add(group1)

    var blackRect = new Konva.Rect({
      x: 20,
      y: 20,
      fill: 'black',
      width: 100,
      height: 100
    })
    group1.add(blackRect)

    var redCircle = new Konva.Circle({
      x: 70,
      y: 70,
      fill: 'red',
      radius: 30
    })
    group1.add(redCircle)

    // 现在把红色圆圈放在黑色矩形的上面
    redCircle.zIndex(0)
    blackRect.zIndex(0)
    console.log('red circle index: ' + redCircle.zIndex())

    // crete second group with one shape
    var group2 = new Konva.Group()
    layer.add(group2)

    var greenRect = new Konva.Rect({
      x: 70,
      y: 70,
      width: 100,
      height: 100,
      fill: 'green'
    })
    group2.add(greenRect)
    console.log('green Rect index: ' + greenRect.zIndex())

    layer.draw();
  </script>
</body>

</html>